<template>
  <div class="detail">
    <div class="bg">
      <img :src="data.cover" alt width="100%" />
    </div>
    <div class="detailInfo">
      <div
        class="playerBox"
        :style="'background:url(' + data.cover + ')'"
      ></div>
      <div class="movieInfo">
        <p class="movieName textline">
          {{ data.name }}
          <span class="movieScore">{{ data.score }}</span>
        </p>
        <p class="movieDirector">
          <span class="movieItem">导演：</span>
          <span class="movieString textline">{{ data.director }}</span>
        </p>
        <p class="movieDirector">
          <span class="movieItem">编剧：</span>
          <span class="movieString textline">{{ data.playwright }}</span>
        </p>
        <p class="movieDirector">
          <span class="movieItem">主演：</span>
          <span class="movieString textline">{{ data.starring }}</span>
        </p>
        <p class="movieDirector">
          <span class="movieItem">时长：</span>
          <span class="movieString textline">{{ data.duration }}分钟</span>
        </p>
        <p class="movieDirector">
          <span class="playing" v-items="{ default: true }" @click="playerPlay">
            <span class="iconfont icon-bofang"></span>
            播放
          </span>
        </p>
      </div>
      <p class="synopsis">简介：{{ data.synopsis }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: false,
      data: false
    };
  },
  created() {
    // window.android.setMoiveStatus("2");
    this.id = this.$route.params.id;
    this.movieDetailLoading();
  },
  methods: {
    movieDetailLoading() {
      this.$api.movieDetailLoading(this);
    },
    playerPlay() {
      window.android.goMoviePlayer(
        "http://47.103.128.167:9191/downloads/movie/fyz.mp4"
      );
    }
  }
};
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.bg > img {
  filter: blur(20px);
}
.detailInfo {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 92vh;
  background: rgba(0, 0, 0, 0.2);
  z-index: 99999;
  padding: 4vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.playerBox {
  width: 20%;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-position: center !important;
  background-size: auto 100% !important;
  background-repeat: no-repeat !important;
}
.playerBox > span {
  font-size: 6vh;
}
.movieInfo {
  width: 60%;
  height: 40vh;
  padding: 10px 50px;
}
.movieName {
  line-height: 10vh;
  font-size: 30px;
}

.movieItem {
  display: block;
  width: 16%;
}
.movieString {
  width: 90%;
}
.movieScore {
  color: rgba(230, 0, 0, 1);
  font-size: 30px;
}
.movieDirector,
.moviePlaywright,
.movieStarring,
.movieDuration {
  font-size: 20px;
  line-height: 6vh;
  height: 6vh;
  display: flex;
  flex-direction: row;
}
.synopsis {
  width: 91%;
  height: 30vh;
  font-size: 20px;
  padding: 0 3%;
}

.iconfont {
  font-size: 20px !important;
  margin-right: 10px;
}
.playing {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 36px;
  line-height: 43px;
  background: rgba(230, 0, 0, 0.8);
  border-radius: 10px;
  padding: 4px;
}
</style>
